<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="编辑" :defaultFullscreen="true" @ok="handleSubmit" :destroyOnClose="true">
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
      <a-tab-pane key="1" tab="基本信息">
        <BaseInfoForm ref="baseInfoRef" :genTable="genTable"/>
      </a-tab-pane>
      <a-tab-pane key="5" tab="生成信息">
        <GenInfoForm ref="genInfoRef" :genTable="genTable"/>
      </a-tab-pane>

      <a-tab-pane key="2" tab="字段信息">
        <GenTableColumn ref="genTableColumnRef" :activeKey="activeKey" v-model:tableColumns="tableColumns"/>
      </a-tab-pane>
      <a-tab-pane key="3" tab="页面属性">
        <PageAttributeColumn ref="pageAttributeColumnRef" :activeKey="activeKey" v-model:tableColumns="tableColumns"/>
      </a-tab-pane>
      <a-tab-pane key="4" tab="索引">
        <GenTableIndex ref="genTableIndexRef" :activeKey="activeKey" :rowId="rowId" :tableColumns="tableColumns"/>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import {BasicModal, useModalInner} from '/@/components/Modal';
  import GenInfoForm from './tabs/GenInfoForm.vue';
  import BaseInfoForm from './tabs/BaseInfoForm.vue';
  import GenTableColumn from './tabs/GenTableColumn.vue';
  import GenTableIndex from './tabs/GenTableIndex.vue';
  import PageAttributeColumn from './tabs/PageAttributeColumn.vue';
  import {saveOrUpdateGenTableInfo, listGenTableColumn, getGenTable} from '../codeGen.api';
  import { ref, onUnmounted } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage'
  const { createMessage } = useMessage()
  const activeKey = ref('-1')
  const preActiveKey = ref('-1')
  const rowId = ref()
  const tableColumns = ref()
  const genTable = ref()

  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    activeKey.value = '1'
    preActiveKey.value = '1'
    // await resetGenInfoFields();
    setModalProps({confirmLoading: false, minHeight:80});
    rowId.value = data.record.id;
    genTable.value = await getGenTable(rowId.value)
    tableColumns.value = await listGenTableColumn(rowId.value)
    // const result = await getInfo(unref(rowId));
  });
  const baseInfoRef = ref()
  const genTableColumnRef = ref()
  const genInfoRef = ref()
  const genTableIndexRef = ref()
  const pageAttributeColumnRef = ref()

  const handleTabChange = (activeKey) => {
    console.log("activeKey: ", activeKey)
  }

  onUnmounted(() => {
    console.log("onUnmounted DbTableModal");
  })
  //表单提交事件
  async function handleSubmit(exit) {
    try {
      let isSuccess = await validateRef("4", genTableIndexRef)
        && await validateRef("2", genTableColumnRef)
        && await validateRef("3", pageAttributeColumnRef)
      
      if (!isSuccess) {
        return
      }
      
      const baseInfoData = await baseInfoRef.value.getData()
      const genInfoData = await genInfoRef.value?.getData()
      const genTableIndexData = genTableIndexRef.value?.getData()
      const genTable = Object.assign(baseInfoData, genInfoData)
      const data = {
        genTable, 
        columnList: tableColumns.value, 
        indexList: genTableIndexData
      }
      console.log("submit data: ", data)
      await saveOrUpdateGenTableInfo(data);
      exit && closeModal()
      createMessage.success("保存成功")
      //刷新列表
      // emit('success', {isUpdate: unref(isUpdate), values: {...values, id: rowId.value}});
    } catch(e) {
      exit && closeModal()
    } finally {
      activeKey.value = '1'
      setModalProps({confirmLoading: false});
    }
  }

  const validateRef = async (key: string, ref: any) => {
    if (ref && ref.value) {
      const isSuccess = await ref.value.validate(() => activeKey.value = key)
      if (!isSuccess) {
        createMessage.error("表单校验未通过")
        console.log("校验失败 activeKey.value: ", key)
        return false
      }
    }
    return true
  }

</script>